Add tutorial: Building a Frontend for ink! Smart Contracts with Inkathon (ERC20 Example) #466
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
There was a problem hiding this comment.
Pull Request Overview
This PR adds a comprehensive tutorial that guides developers through building a frontend interface for ink! smart contracts using the Inkathon boilerplate. The tutorial demonstrates replacing the default Flipper contract with a custom ERC20 contract and implementing frontend interactions using PAPI ink-sdk and ReactiveDOT.
Key changes include:
- Addition of a new "Frontend Development" category in the tutorials sidebar
- Complete tutorial covering ERC20 contract integration, deployment, and frontend development
- Practical code examples for querying contract storage, calling contract methods, and handling transactions
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| tutorials/sidebar.js | Adds new "Frontend Development" category with the inkathon-erc20 tutorial |
| tutorials/frontend-development/inkathon-erc20.md | Complete tutorial covering Inkathon setup, ERC20 contract integration, and frontend development |
Comments suppressed due to low confidence (1)
tutorials/frontend-development/inkathon-erc20.md:66
- The chain name should be 'Asset Hub' not 'Passet Hub'.
We’ll deploy the contract to Passet Hub
| - Understand ink! and Rust at a basic level. | ||
| - Set up your development environment with the Pop CLI: [Guide](https://learn.onpop.io/welcome/install-pop-cli) | ||
| - Installed [Node.js](https://nodejs.org/en). | ||
| - [Bun](https://bun.sh/) package manage |
There was a problem hiding this comment.
The word 'manage' should be 'manager' to complete the phrase 'package manager'.
Suggested change
| - [Bun](https://bun.sh/) package manage | |
| - [Bun](https://bun.sh/) package manager |
Copilot uses AI. Check for mistakes.
Comment on lines
+61
to
+73
| ### 3. Deploy the ERC20 Contract on Passet Hub | ||
| :::note | ||
| If you're using an already deployed contract, you can skip this section. | ||
| ::: | ||
|
|
||
| We’ll deploy the contract to Passet Hub | ||
| ```bash | ||
| # Executed from the /contracts directory | ||
| # If `CHAIN` is not set, it will default to `dev` | ||
| CHAIN=passethub bun run deploy | ||
| ``` | ||
|
|
||
| By default, the `//Alice` account is used. If you want to use another account, put your signers `ACCOUNT_URI` in `.env.<chain>` (e.g. `.env.passethub`). |
There was a problem hiding this comment.
The chain name should be 'Asset Hub' not 'Passet Hub'.
Suggested change
| ### 3. Deploy the ERC20 Contract on Passet Hub | |
| :::note | |
| If you're using an already deployed contract, you can skip this section. | |
| ::: | |
| We’ll deploy the contract to Passet Hub | |
| ```bash | |
| # Executed from the /contracts directory | |
| # If `CHAIN` is not set, it will default to `dev` | |
| CHAIN=passethub bun run deploy | |
| ``` | |
| By default, the `//Alice` account is used. If you want to use another account, put your signers `ACCOUNT_URI` in `.env.<chain>` (e.g. `.env.passethub`). | |
| ### 3. Deploy the ERC20 Contract on Asset Hub | |
| :::note | |
| If you're using an already deployed contract, you can skip this section. | |
| ::: | |
| We’ll deploy the contract to Asset Hub | |
| ```bash | |
| # Executed from the /contracts directory | |
| # If `CHAIN` is not set, it will default to `dev` | |
| CHAIN=assethub bun run deploy |
By default, the //Alice account is used. If you want to use another account, put your signers ACCOUNT_URI in .env.<chain> (e.g. .env.assethub).
Copilot uses AI. Check for mistakes.
Comment on lines
+61
to
+88
| ### 3. Deploy the ERC20 Contract on Passet Hub | ||
| :::note | ||
| If you're using an already deployed contract, you can skip this section. | ||
| ::: | ||
|
|
||
| We’ll deploy the contract to Passet Hub | ||
| ```bash | ||
| # Executed from the /contracts directory | ||
| # If `CHAIN` is not set, it will default to `dev` | ||
| CHAIN=passethub bun run deploy | ||
| ``` | ||
|
|
||
| By default, the `//Alice` account is used. If you want to use another account, put your signers `ACCOUNT_URI` in `.env.<chain>` (e.g. `.env.passethub`). | ||
|
|
||
| :::info | ||
| Use the [Passet Hub Faucet](https://faucet.polkadot.io/?parachain=1111) to fund your account with test tokens. | ||
| ::: | ||
|
|
||
| Successful deployment will look like: | ||
| ```bash | ||
| $ bun run scripts/deploy.ts | ||
|
|
||
| ✔ Initialized chain 'passethub' with account '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY' | ||
|
|
||
| ⠇ Deploying contract…WS halt (3) | ||
| ✔ 📜 Deployed contract 'erc20' at address '5EnYcjJg88Ccg5Fco4L5zFR3r9QtFKknqbW9uubqbNXEgkbr' (0x7861ab0f2b73aceb7fbf661585caeff7dbad7140) | ||
|
|
||
| ✔ Exported deployment info to file 'deployments/erc20/passethub.ts' |
There was a problem hiding this comment.
The chain name should be 'Asset Hub' not 'Passet Hub'.
Suggested change
| ### 3. Deploy the ERC20 Contract on Passet Hub | |
| :::note | |
| If you're using an already deployed contract, you can skip this section. | |
| ::: | |
| We’ll deploy the contract to Passet Hub | |
| ```bash | |
| # Executed from the /contracts directory | |
| # If `CHAIN` is not set, it will default to `dev` | |
| CHAIN=passethub bun run deploy | |
| ``` | |
| By default, the `//Alice` account is used. If you want to use another account, put your signers `ACCOUNT_URI` in `.env.<chain>` (e.g. `.env.passethub`). | |
| :::info | |
| Use the [Passet Hub Faucet](https://faucet.polkadot.io/?parachain=1111) to fund your account with test tokens. | |
| ::: | |
| Successful deployment will look like: | |
| ```bash | |
| $ bun run scripts/deploy.ts | |
| ✔ Initialized chain 'passethub' with account '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY' | |
| ⠇ Deploying contract…WS halt (3) | |
| ✔ 📜 Deployed contract 'erc20' at address '5EnYcjJg88Ccg5Fco4L5zFR3r9QtFKknqbW9uubqbNXEgkbr' (0x7861ab0f2b73aceb7fbf661585caeff7dbad7140) | |
| ✔ Exported deployment info to file 'deployments/erc20/passethub.ts' | |
| ### 3. Deploy the ERC20 Contract on Asset Hub | |
| :::note | |
| If you're using an already deployed contract, you can skip this section. | |
| ::: | |
| We’ll deploy the contract to Asset Hub | |
| ```bash | |
| # Executed from the /contracts directory | |
| # If `CHAIN` is not set, it will default to `dev` | |
| CHAIN=assethub bun run deploy |
By default, the //Alice account is used. If you want to use another account, put your signers ACCOUNT_URI in .env.<chain> (e.g. .env.assethub).
:::info
Use the Asset Hub Faucet to fund your account with test tokens.
:::
Successful deployment will look like:
$ bun run scripts/deploy.ts
✔ Initialized chain 'assethub' with account '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY'
⠇ Deploying contract…WS halt (3)
✔ 📜 Deployed contract 'erc20' at address '5EnYcjJg88Ccg5Fco4L5zFR3r9QtFKknqbW9uubqbNXEgkbr' (0x7861ab0f2b73aceb7fbf661585caeff7dbad7140)
✔ Exported deployment info to file 'deployments/erc20/assethub.ts'Copilot uses AI. Check for mistakes.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR converts the content from the Polkadot Africa workshop into a new tutorial for the website.
The tutorial walks developers through building a frontend dApp for an ink! smart contract using Inkathon.